<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="140px">
        <el-form-item label="供应商名称：">
          <el-select
                  clearable
                  @change="getListData"
                  v-model="listQuery.supplierId"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod3"
                  :loading="loading">
            <el-option
                    v-for="item in supplierList"
                    :key="item.supplierId"
                    :label="item.supplierName"
                    :value="item.supplierId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="询价时间：">
          <el-date-picker
                  value-format="yyyy-MM-dd HH:mm"
                  v-model="listQuery.createTime"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-form>
        <el-table
                v-loading="listLoading"
                :data="list"
                border
                style="width: 100%; margin-top: 20px">
          <el-table-column
                  label="材料"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.goodsSn}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="chargeGoodsList"
                  label="数量">
            <template slot-scope="scope">
              <el-form-item>
                <el-input size="small" v-model="scope.row.goodsNum"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="chargeGoodsList"
                  label="散货单价">
            <template slot-scope="scope">
              <el-form-item>
                <el-input size="small" v-model="scope.row.goodsPrice"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="chargeGoodsList"
                  label="整车单价">
            <template slot-scope="scope">
              <el-form-item>
                <el-input size="small" v-model="scope.row.batchPrice"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="chargeGoodsList"
                  label="交货期">
            <template slot-scope="scope">
              <el-form-item>
                <el-input size="small" v-model="scope.row.deliveryDate"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="chargeGoodsList"
                  label="交货地">
            <template slot-scope="scope">
              <el-form-item>
                <el-input size="small" v-model="scope.row.deliveryArea"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="chargeGoodsList"
                  label="备注">
            <template slot-scope="scope">
              <el-form-item>
                <el-input size="small" v-model="scope.row.remark"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

    </div>
    <div style="margin-top:20px;text-align: center;">
      <el-button type="primary" @click="handleConfirm" :loading="btnLoading" size="small">保存</el-button>
    </div>

  </div>
</template>

<script>
  import {supplierListApi,goodsList,supplierInquiryAdd,supplierGoodsList} from '@/api/company'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  const defaultListQuery={
    createTime:'',
    supplierId:''
  };
  export default {
    name: "index",
    data(){
      return{
        roles:store.getters.roles ? store.getters.roles : [],
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        list:[],
        listLoading:false,
        loading:false,
        btnLoading:false,
        supplierList:[],
        supplierId:this.$route.query.id,
        supplierName:this.$route.query.name
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),
    },
    created() {
      this.listQuery.createTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm');
      if(this.$route.query.id){
        this.listQuery.supplierId = this.$route.query.id;
        this.supplierList = [];
        this.supplierList.push({supplierId:this.supplierId,supplierName:this.supplierName})
      }
      this.getListData();

    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd')
      },
    },
    methods:{
      //提交询价记录
      handleConfirm(){
          let data = {};
          data.inquiryDate = this.listQuery.createTime;
          data.inquiryData = this.list;
          this.btnLoading = true;
          supplierInquiryAdd(data).then(()=>{
            this.btnLoading = false;
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.$router.push({name:'supplierInquiry',query:{tab:this.$route.query.tab}})
          }).catch(()=>{
            this.btnLoading = false;
          })
      },
      //获取供应商列表
      remoteMethod3(query) {
        if(query && query!= ''){
          this.loading = true;
          //获取供应产列表
          supplierListApi({tab:this.listQuery.tab,supplierName:query,pageNum:1,pageSize:1000}).then(response => {
            this.supplierList = response.list;
            this.loading = false;
          }).catch(()=>{
            this.loading = false;
          });

        }
      },
      //去详情页
      toDetail(item){
        let routeData = this.$router.resolve({name:'supplierInfo',query:{id:item.supplierId}});
        window.open(routeData.href);
      },

      //获取列表
      getListData(){
        if(this.listQuery.supplierId && this.listQuery.supplierId != ''){
          this.listLoading = true;
          supplierGoodsList({supplierId:this.listQuery.supplierId,tab:'all',pageNum:1,pageSize:1000}).then((res)=>{
            this.list = [];
            res.list.forEach((el,index)=>{
              let c = {supplierId:el.supplierId,goodsSn:el.goodsSn,goodsKingId:el.goodsKingId,goodsNum:'',deliveryDate:'',deliveryArea:'',goodsPrice:'',batchPrice:'',remark:''}
              this.list.push(c)
            })
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        }else{
          this.list = [];
        }

      },
    },
  }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
